<template>
  <div id="app">
    <div class="nav">
      <div class="nav-logo">
        <div class="nav-logo-container" >
          <img src="@/assets/logo.png" alt="">
        </div>
      </div>
      <div class="nav-content">
        <div>
          <nav>
              <div class="nav-container">
                <span class="nav-item" @click="toElement">Element</span>
                <span class="nav-item" @click="toComment">评论模块</span>
                <span class="nav-item" @click="toCSS">CSS相关</span>
                <span class="nav-item" @click="toGrammar">语法详解</span>
              </div> 
 
          </nav>
        </div>
      </div>
      <div class="nav-center"> 
         <div>大会哈安徽哈哈a</div>
         <div>啊好受点 哈</div>
         <div>啊好啊好</div>
      </div>
    </div>
    <div class=""></div>
    <!-- <img src="./assets/logo.png"> -->
    <router-view />
  </div>
</template>

<script>
  export default {
    name: 'App',
    data(){
      return{

      }
    },
    methods: {
      goDetails(){
        this.$router.push('/product');
      },
      goDynamicDetails(){
        const id = "1234567890"; 
        console.log('tag', 'goDynamicDetails');
        this.$router.push('/detail');
       // this.$router.push({ path: `/detail/${id}`});
       //this.$router.push({ path: `/detail/${id}`});
      },
      toElement(){
         this.$router.push('/element')
      },
      toCSS(){
        this.$router.push('/css')
      },
      toComment(){
        console.log('tag', 'comment');
        this.$router.push('/mycomment');
      },
      toGrammar(){
        this.$router.push('/grammar');
      }
    },
  }
</script>

<style>
  #app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .nav {
     background: rgb(130, 182, 93);
     width: 100%;
     height: 100px;
     display: flex;
     flex-direction: row;
  }
  .nav-logo{
    width: 200px;
    height: 100px;
    display: flex;
    justify-content:center;
    align-items:center;
    background-color: aquamarine;
  }

   .nav-logo-container{
       background-color: bisque;
       width: 50px;
       height: 50px; 
       justify-content:center;
       align-items:center;
    }

  .nav-logo img{
    width: 50px;
    height: 50px; 
    border: 1px solid rgb(52, 49, 53);
    background-color: rgb(0, 139, 86);
  }

  .nav-content{
    background-color: rgb(22, 187, 187);
     width: 500px; 
    height: 100px;
  }
  
  .nav-center{
    background-color: burlywood;
    width: auto;
    margin-right: 30px;
    height: 100px;
    white-space:nowrap;
  }

  .nav-container{
    
    /* white-space:nowrap; */
  }

  .nav-item{
    display: inline-block;
    width: 100px;
    cursor: pointer;
    vertical-align: middle;
    background: rgb(209, 203, 203);
  }
   
  .nav-item:hover{
      color:brown
      
  }
   
</style>